<template>
  <div class="plan">
    <div class="plan-banner"></div>
    <div class="public-views">
      <div class="public-inner">
        <div class="plan-left">
          <ul class="plan-nav">
            <li v-for="item in planNav" :class="{'plan-nav-activate': item.activate}" @click="navTab(item)">{{item.text}}</li>
          </ul>
          <div class="plan-content" v-if="isViews">
            <div class="content-list clearFix">
              <h3 class="list-time">11:00</h3>
              <div class="list-round">
                <a href="javascript:;">
                  <span>
                    <i></i>
                  </span>
                </a>
              </div>
              <div class="list-item" v-for="(item, index) in PlanGame" v-if="index < (PlanGame.length/2)">
                <i :style="{backgroundImage: 'url(' + item.icon + ')'}"></i>
                <h4>{{item.name}}</h4>
                <p class="area">{{item.title}}</p>
                <p class="label">
                  <span>{{item.type}}</span>
                  <span>{{item.label}}</span>
                </p>
                <div class="type">
                  <i v-if="item.device === 'ios' || item.device === 'h5'" class="iconfont icon-pingguo ios"></i>
                  <i v-if="item.device === 'android' || item.device === 'h5'" class="iconfont icon-anzhuo android"></i>
                  <span v-if="item.device === 'h5'" class="h5">H5</span>
                </div>
                <div class="item-button">
                  <a href="javascript:;">下载</a>
                  <a href="javascript:;">礼包</a>
                </div>
              </div>
            </div>
          </div>
          <div class="plan-content end-content" v-if="!isViews">
            <div class="content-list clearFix">
              <h3 class="list-time">11:00</h3>
              <div class="list-round">
                <a href="javascript:;">
                  <span>
                    <i></i>
                  </span>
                </a>
              </div>
              <div class="list-item" v-for="(item, index) in PlanGame" v-if="index < (PlanGame.length/2)">
                <i :style="{backgroundImage: 'url(' + item.icon + ')'}"></i>
                <h4>{{item.name}}</h4>
                <p class="area">{{item.title}}</p>
                <p class="label">
                  <span>{{item.type}}</span>
                  <span>{{item.label}}</span>
                </p>
                <div class="type">
                  <i v-if="item.device === 'ios' || item.device === 'h5'" class="iconfont icon-pingguo ios"></i>
                  <i v-if="item.device === 'android' || item.device === 'h5'" class="iconfont icon-anzhuo android"></i>
                  <span v-if="item.device === 'h5'" class="h5">H5</span>
                </div>
                <div class="item-button">
                  <a href="javascript:;">下载</a>
                  <a href="javascript:;">礼包</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="plan-right">
          <right-sidebar-play v-if="PlanGame" :list="PlanGame"></right-sidebar-play>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const rightSidebarPlay = import('@/components/rightSidebarPlay.vue')
export default {
  title() {
    return `米娱游戏_热门开服`
  },
  components: {
    rightSidebarPlay
  },
  asyncData({ store, route }) {
    const s = parseInt(Math.random() * 200 + 1)
    const e = parseInt(Math.random() * 15 + 10)
    return store.dispatch('fetchGiftGame', { start: s, end: e, cache: true })
  },
  computed: {
    PlanGame: function() {
    //   return this.$store.state.GiftGame
      return [{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806402235bf.png","name":"合体三国","link":"javascript:;","device":"android","type":"塔防","label":"科幻","size":"175","state":"1","user_number":"22545","download_number":"64421","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/588068ff8d2af.png","name":"恶魔骑士团","link":"javascript:;","device":"android","type":"冒险","label":"战争","size":"175","state":"0","user_number":"54335","download_number":"108796","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806715c1f5e.png","name":"爬塔三国","link":"javascript:;","device":"ios","type":"棋牌","label":"科幻","size":"143","state":"2","user_number":"79608","download_number":"78271","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806597da65e.png","name":"全民穿越之宫","link":"javascript:;","device":"ios","type":"棋牌","label":"动漫","size":"77","state":"1","user_number":"44056","download_number":"96293","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/588064cfc1ef9.png","name":"小小地下城","link":"javascript:;","device":"android","type":"棋牌","label":"战争","size":"20","state":"0","user_number":"10612","download_number":"82007","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/588064986aee6.png","name":"英雄也疯狂","link":"javascript:;","device":"android","type":"竞技","label":"历史","size":"29","state":"1","user_number":"34005","download_number":"100563","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806742817a2.png","name":"主公快点","link":"javascript:;","device":"h5","type":"解密","label":"魔幻","size":"205","state":"2","user_number":"109903","download_number":"70790","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/images/2016/game/indexhot/game_mhjh.png","name":"梦回江湖","link":"javascript:;","device":"h5","type":"竞速","label":"历史","size":"88","state":"0","user_number":"91581","download_number":"100217","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806e6e57f83.png","name":"新葵花宝典","link":"javascript:;","device":"ios","type":"角色","label":"动漫","size":"11","state":"3","user_number":"64620","download_number":"33626","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806e4a74763.png","name":"神仙道","link":"javascript:;","device":"ios","type":"养成","label":"魔幻","size":"126","state":"1","user_number":"92294","download_number":"47227","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806e3d993b4.png","name":"傲视天地","link":"javascript:;","device":"h5","type":"解密","label":"战争","size":"166","state":"3","user_number":"18615","download_number":"105583","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806e5cde34a.png","name":"神曲","link":"javascript:;","device":"ios","type":"动作","label":"战争","size":"26","state":"0","user_number":"60219","download_number":"25683","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806e22a4c64.png","name":"天书世界","link":"javascript:;","device":"ios","type":"冒险","label":"历史","size":"133","state":"2","user_number":"108521","download_number":"92252","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/images/2016/game/indexhot/game_dsg.png","name":"斗三国","link":"javascript:;","device":"ios","type":"射击","label":"历史","size":"193","state":"0","user_number":"55947","download_number":"10322","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/images/2016/game/indexhot/game_wly.png","name":"卧龙吟","link":"javascript:;","device":"android","type":"角色","label":"科幻","size":"28","state":"0","user_number":"40542","download_number":"14844","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806d44a5068.png","name":"盗墓笔记","link":"javascript:;","device":"ios","type":"棋牌","label":"科幻","size":"51","state":"1","user_number":"12023","download_number":"22850","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806e7d7b31d.png","name":"木叶传说","link":"javascript:;","device":"android","type":"竞技","label":"动漫","size":"120","state":"1","user_number":"45745","download_number":"107989","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806dd4bdd7b.png","name":"三国之志","link":"javascript:;","device":"android","type":"角色","label":"仙侠","size":"138","state":"1","user_number":"61733","download_number":"102204","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806e137d664.png","name":"帝王霸业","link":"javascript:;","device":"ios","type":"角色","label":"魔幻","size":"167","state":"2","user_number":"11687","download_number":"42681","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"}]
    }
  },
  data() {
    return {
      planNav: [
        { text: '即将开服', activate: true, view: 1 },
        { text: '已经开服', activate: false, view: 0 }
      ],
      isViews: 1
    }
  },
  methods: {
    // 切换导航
    navTab(item) {
      this.planNav.map(v => v.activate = false)
      item.activate = true
      this.isViews = item.view
    }
  }
}
</script>

<style lang="less" scoped>
.plan-banner {
  height: 300px;
  background: url('/public/images/plan_banner.png') no-repeat;
  background-size: 100% 100%;
}

.plan-left {
  width: 900px;
  float: left;
  margin-bottom: 40px;
  .plan-nav {
    overflow: hidden;
    li {
      line-height: 70px;
      width: 225px;
      text-align: center;
      float: left;
      box-shadow: 0 5px 5px 0 #eee inset;
      font-weight: 600;
    }
    .plan-nav-activate {
      background: #fff;
      box-shadow: none;
      color: #ffa93a;
    }
  }
  .plan-content {
    background: #fff;
    margin-top: -1px;
    box-shadow: 1px 1px 5px 1px #eee;
    padding: 30px 30px 50px 35px;
    .content-list {
      border-left: 2px solid #eee;
      padding-top: 90px;
      padding-left: 18px;
      position: relative;
      .list-time {
        line-height: 30px;
        width: 230px;
        color: #fff;
        text-align: center;
        background: #ffbb64;
        border-radius: 15px;
        position: absolute;
        top: 30px;
        left: 8px;
      }
      .list-round {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: -25px;
        top: 20px;
        z-index: 2;
        a {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #ffcf92;
          position: absolute;
          left: 50%;
          top: 50%;
          margin: -12px 0 0 -12px;
        }
        span {
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background: #fff;
          position: absolute;
          left: 50%;
          top: 50%;
          margin: -7px 0 0 -7px;
        }
        i {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ffa93a;
          position: absolute;
          left: 50%;
          top: 50%;
          margin: -4px 0 0 -4px;
        }
      }
      .list-item {
        border: 1px solid #eee;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 20px 120px 20px 135px;
        position: relative;
        height: 100px;
        width: 145px;
        &>i {
          width: 100px;
          height: 100px;
          border-radius: 10px;
          position: absolute;
          left: 20px;
          top: 20px;
          background-size: 100%;
          background-repeat: no-repeat;
        }
        .item-button {
          position: absolute;
          right: 20px;
          top: 25px;
          a {
            display: block;
            width: 100px;
            line-height: 38px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            border-radius: 10px;
            background: #2cd0ff;
            &:nth-child(2) {
              margin-top: 14px;
              background: #88d42f;
            }
          }
        }
        h4 {
          padding-top: 5px;
        }
        .area {
          padding: 10px 0 8px;
          color: #ffa93a;
          font-size: 14px;
        }
        .label {
          span {
            color: #ccc;
            margin-right: 10px;
            font-size: 14px;
            position: relative;
            &:nth-child(2) {
              padding-left: 10px;
              &:before {
                content: '';
                height: 70%;
                width: 1px;
                background: #ccc;
                position: absolute;
                left: 0;
                top: 15%;
              }
            }
          }
        }
        .type {
          padding-top: 10px;
          span {
            margin-left: 10px;
            font-size: 14px;
            color: #fff;
            background: #ffce8f;
            padding: 1px 10px;
            border-radius: 15px;
            vertical-align: middle;
          }
          .ios {
            color: #c6e2a6;
            font-size: 22px;
            vertical-align: middle;
          }
          .android {
            vertical-align: middle;
            color: #9de1f5;
            font-size: 20px;
            margin-left: 10px;
          }
        }
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
  .end-content {
    .content-list {
      .list-time {
        background: #ccc;
      }
      .list-round {
        a {
          background: #e5e5e5;
        }
        i {
          background: #ccc;
        }
      }
    }
  }
}

.plan-right {
  width: 260px;
  float: right;
}
</style>

